<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舆情分析 - 舆情分析系统</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <style>
        .container {
            padding: 20px;
            background: #f5f5f5;
            min-height: 100vh;
        }
        
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }
        
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .chart-wrapper {
            height: 400px;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .report-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .report-item {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 0;
        }
        
        .report-item:last-child {
            border-bottom: none;
        }
        
        .report-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .report-meta {
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .report-summary {
            color: #666;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        
        .risk-level {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        
        .risk-high {
            background: #ff4d4f;
        }
        
        .risk-medium {
            background: #faad14;
        }
        
        .risk-low {
            background: #52c41a;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            color: #999;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">舆情分析</h1>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-section">
            <form class="layui-form" lay-filter="filterForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">分析时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="dateRange" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">风险等级</label>
                        <div class="layui-input-inline">
                            <select name="riskLevel" lay-filter="riskLevel">
                                <option value="">全部等级</option>
                                <option value="high">高风险</option>
                                <option value="medium">中风险</option>
                                <option value="low">低风险</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" placeholder="请输入关键词" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" @click="searchData">查询</button>
                        <button type="button" class="layui-btn layui-btn-primary" @click="resetFilter">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-number">{{ stats.totalReports }}</div>
                <div class="stat-label">总报告数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.avgRiskScore }}</div>
                <div class="stat-label">平均风险评分</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.highRiskCount }}</div>
                <div class="stat-label">高风险事件</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.trendDirection }}</div>
                <div class="stat-label">舆情趋势</div>
            </div>
        </div>

        <!-- 舆情趋势分析 -->
        <div class="chart-container">
            <h3 class="chart-title">舆情趋势分析</h3>
            <div id="trendChart" class="chart-wrapper"></div>
        </div>

        <!-- 风险等级分布 -->
        <div class="chart-container">
            <h3 class="chart-title">风险等级分布</h3>
            <div id="riskChart" class="chart-wrapper"></div>
        </div>

        <!-- 情感变化趋势 -->
        <div class="chart-container">
            <h3 class="chart-title">情感变化趋势</h3>
            <div id="sentimentChart" class="chart-wrapper"></div>
        </div>

        <!-- 热点话题分析 -->
        <div class="chart-container">
            <h3 class="chart-title">热点话题分析</h3>
            <div id="topicChart" class="chart-wrapper"></div>
        </div>

        <!-- 舆情报告列表 -->
        <div class="report-section">
            <h3 class="chart-title">舆情报告列表</h3>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-else>
                <div class="report-item" v-for="report in reports" :key="report.id">
                    <div class="report-title" @click="viewReport(report)">
                        {{ report.title }}
                    </div>
                    <div class="report-meta">
                        <span>生成时间: {{ report.generateTime }}</span>
                        <span>分析周期: {{ report.analysisPeriod }}</span>
                        <span>数据量: {{ report.dataVolume }}</span>
                        <span class="risk-level" :class="getRiskClass(report.riskLevel)">
                            {{ getRiskText(report.riskLevel) }}
                        </span>
                    </div>
                    <div class="report-summary">{{ report.summary }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../../lib/echarts/echarts.min.js"></script>
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/api.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                stats: {
                    totalReports: 0,
                    avgRiskScore: 0,
                    highRiskCount: 0,
                    trendDirection: ''
                },
                reports: [],
                trendChart: null,
                riskChart: null,
                sentimentChart: null,
                topicChart: null,
                filterParams: {
                    startDate: '',
                    endDate: '',
                    riskLevel: '',
                    keyword: ''
                },
                loading: false
            },
            mounted() {
                this.initLayui();
                this.initCharts();
                this.loadData();
            },
            methods: {
                // 初始化Layui
                initLayui() {
                    layui.use(['form', 'laydate'], () => {
                        const form = layui.form;
                        const laydate = layui.laydate;
                        
                        // 初始化日期选择器
                        laydate.render({
                            elem: '#dateRange',
                            type: 'date',
                            range: true,
                            done: (value) => {
                                if (value) {
                                    const dates = value.split(' - ');
                                    this.filterParams.startDate = dates[0];
                                    this.filterParams.endDate = dates[1];
                                }
                            }
                        });
                        
                        form.render();
                    });
                },

                // 初始化图表
                initCharts() {
                    this.trendChart = echarts.init(document.getElementById('trendChart'));
                    this.riskChart = echarts.init(document.getElementById('riskChart'));
                    this.sentimentChart = echarts.init(document.getElementById('sentimentChart'));
                    this.topicChart = echarts.init(document.getElementById('topicChart'));
                },

                // 加载数据
                async loadData() {
                    try {
                        this.loading = true;
                        
                        // 加载统计数据
                        await this.loadStats();
                        
                        // 加载报告列表
                        await this.loadReports();
                        
                        // 加载图表数据
                        await this.loadChartData();
                        
                    } catch (error) {
                        console.error('加载数据失败:', error);
                        layui.use('layer', () => {
                            layui.layer.msg('加载数据失败', {icon: 2});
                        });
                    } finally {
                        this.loading = false;
                    }
                },

                // 加载统计数据
                async loadStats() {
                    try {
                        const response = await API.opinion.getOpinionStats(this.filterParams);
                        this.stats = response;
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                        // 使用模拟数据
                        this.stats = {
                            totalReports: 25,
                            avgRiskScore: 6.8,
                            highRiskCount: 3,
                            trendDirection: '上升'
                        };
                    }
                },

                // 加载报告列表
                async loadReports() {
                    try {
                        const response = await API.opinion.getOpinionReports(this.filterParams);
                        this.reports = response;
                    } catch (error) {
                        console.error('加载报告列表失败:', error);
                        // 使用模拟数据
                        this.reports = this.getMockReports();
                    }
                },

                // 加载图表数据
                async loadChartData() {
                    try {
                        const response = await API.opinion.getOpinionCharts(this.filterParams);
                        this.updateCharts(response);
                    } catch (error) {
                        console.error('加载图表数据失败:', error);
                        // 使用模拟数据
                        this.updateCharts(this.getMockChartData());
                    }
                },

                // 更新图表
                updateCharts(data) {
                    this.updateTrendChart(data);
                    this.updateRiskChart(data);
                    this.updateSentimentChart(data);
                    this.updateTopicChart(data);
                },

                // 更新趋势分析图表
                updateTrendChart(data) {
                    const dates = data.trendData?.dates || ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'];
                    const riskScores = data.trendData?.riskScores || [5.2, 6.1, 7.3, 6.8, 8.1, 7.5, 6.9];
                    const volumeData = data.trendData?.volumeData || [1200, 1320, 1010, 1340, 900, 2300, 2100];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            data: ['风险评分', '舆情量']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: dates
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '风险评分',
                                min: 0,
                                max: 10
                            },
                            {
                                type: 'value',
                                name: '舆情量',
                                position: 'right'
                            }
                        ],
                        series: [
                            {
                                name: '风险评分',
                                type: 'line',
                                yAxisIndex: 0,
                                data: riskScores,
                                itemStyle: {
                                    color: '#ff4d4f'
                                }
                            },
                            {
                                name: '舆情量',
                                type: 'bar',
                                yAxisIndex: 1,
                                data: volumeData
                            }
                        ]
                    };
                    this.trendChart.setOption(option);
                },

                // 更新风险等级分布图表
                updateRiskChart(data) {
                    const riskLevels = data.riskDistribution?.levels || ['高风险', '中风险', '低风险'];
                    const counts = data.riskDistribution?.counts || [3, 8, 14];
                    
                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '风险等级',
                                type: 'pie',
                                radius: '50%',
                                data: riskLevels.map((level, index) => ({
                                    value: counts[index],
                                    name: level,
                                    itemStyle: {
                                        color: index === 0 ? '#ff4d4f' : index === 1 ? '#faad14' : '#52c41a'
                                    }
                                })),
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    this.riskChart.setOption(option);
                },

                // 更新情感变化趋势图表
                updateSentimentChart(data) {
                    const dates = data.sentimentData?.dates || ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'];
                    const positive = data.sentimentData?.positive || [45, 42, 38, 35, 32, 30, 28];
                    const neutral = data.sentimentData?.neutral || [35, 38, 40, 42, 45, 48, 50];
                    const negative = data.sentimentData?.negative || [20, 20, 22, 23, 23, 22, 22];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['正面', '中性', '负面']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dates
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        },
                        series: [
                            {
                                name: '正面',
                                type: 'line',
                                stack: 'Total',
                                data: positive,
                                itemStyle: { color: '#52c41a' }
                            },
                            {
                                name: '中性',
                                type: 'line',
                                stack: 'Total',
                                data: neutral,
                                itemStyle: { color: '#faad14' }
                            },
                            {
                                name: '负面',
                                type: 'line',
                                stack: 'Total',
                                data: negative,
                                itemStyle: { color: '#ff4d4f' }
                            }
                        ]
                    };
                    this.sentimentChart.setOption(option);
                },

                // 更新热点话题分析图表
                updateTopicChart(data) {
                    const topics = data.topicData?.topics || ['人工智能', '新能源汽车', '互联网裁员', '教育政策', '医疗改革'];
                    const heatScores = data.topicData?.heatScores || [85, 72, 68, 55, 48];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data: topics
                        },
                        series: [
                            {
                                name: '热度评分',
                                type: 'bar',
                                data: heatScores
                            }
                        ]
                    };
                    this.topicChart.setOption(option);
                },

                // 获取模拟报告数据
                getMockReports() {
                    return [
                        {
                            id: 1,
                            title: '人工智能技术发展舆情分析报告',
                            generateTime: '2024-01-15 16:00',
                            analysisPeriod: '2024-01-08 至 2024-01-15',
                            dataVolume: '12,500条',
                            riskLevel: 'medium',
                            summary: '本周人工智能相关舆情整体呈上升趋势，主要关注技术发展、应用场景和伦理问题。风险评分6.8分，属于中等风险水平。'
                        },
                        {
                            id: 2,
                            title: '新能源汽车市场舆情监测报告',
                            generateTime: '2024-01-15 15:30',
                            analysisPeriod: '2024-01-08 至 2024-01-15',
                            dataVolume: '10,800条',
                            riskLevel: 'low',
                            summary: '新能源汽车市场舆情相对稳定，用户关注度主要集中在产品性能、充电设施和政策支持方面。风险评分4.2分，属于低风险水平。'
                        },
                        {
                            id: 3,
                            title: '互联网行业裁员潮舆情预警报告',
                            generateTime: '2024-01-15 15:00',
                            analysisPeriod: '2024-01-08 至 2024-01-15',
                            dataVolume: '15,200条',
                            riskLevel: 'high',
                            summary: '互联网行业裁员话题持续发酵，引发广泛关注和讨论。风险评分8.5分，属于高风险水平，需要重点关注。'
                        },
                        {
                            id: 4,
                            title: '教育行业数字化转型舆情分析',
                            generateTime: '2024-01-15 14:30',
                            analysisPeriod: '2024-01-08 至 2024-01-15',
                            dataVolume: '8,600条',
                            riskLevel: 'medium',
                            summary: '教育数字化转型话题讨论热度适中，主要关注在线教育质量、技术应用效果等问题。风险评分5.8分，属于中等风险水平。'
                        },
                        {
                            id: 5,
                            title: '医疗科技创新舆情监测报告',
                            generateTime: '2024-01-15 14:00',
                            analysisPeriod: '2024-01-08 至 2024-01-15',
                            dataVolume: '9,400条',
                            riskLevel: 'low',
                            summary: '医疗科技创新相关舆情积极正面，主要关注AI辅助诊断、远程医疗等应用。风险评分3.5分，属于低风险水平。'
                        }
                    ];
                },

                // 获取模拟图表数据
                getMockChartData() {
                    return {
                        trendData: {
                            dates: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
                            riskScores: [5.2, 6.1, 7.3, 6.8, 8.1, 7.5, 6.9],
                            volumeData: [1200, 1320, 1010, 1340, 900, 2300, 2100]
                        },
                        riskDistribution: {
                            levels: ['高风险', '中风险', '低风险'],
                            counts: [3, 8, 14]
                        },
                        sentimentData: {
                            dates: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
                            positive: [45, 42, 38, 35, 32, 30, 28],
                            neutral: [35, 38, 40, 42, 45, 48, 50],
                            negative: [20, 20, 22, 23, 23, 22, 22]
                        },
                        topicData: {
                            topics: ['人工智能', '新能源汽车', '互联网裁员', '教育政策', '医疗改革'],
                            heatScores: [85, 72, 68, 55, 48]
                        }
                    };
                },

                // 获取风险等级样式类
                getRiskClass(riskLevel) {
                    const classes = {
                        'high': 'risk-high',
                        'medium': 'risk-medium',
                        'low': 'risk-low'
                    };
                    return classes[riskLevel] || 'risk-low';
                },

                // 获取风险等级文本
                getRiskText(riskLevel) {
                    const texts = {
                        'high': '高风险',
                        'medium': '中风险',
                        'low': '低风险'
                    };
                    return texts[riskLevel] || '低风险';
                },

                // 查看报告详情
                viewReport(report) {
                    layui.use('layer', () => {
                        layui.layer.open({
                            type: 1,
                            title: report.title,
                            area: ['800px', '600px'],
                            content: `
                                <div style="padding: 20px;">
                                    <h3>${report.title}</h3>
                                    <p><strong>生成时间:</strong> ${report.generateTime}</p>
                                    <p><strong>分析周期:</strong> ${report.analysisPeriod}</p>
                                    <p><strong>数据量:</strong> ${report.dataVolume}</p>
                                    <p><strong>风险等级:</strong> <span class="risk-level ${this.getRiskClass(report.riskLevel)}">${this.getRiskText(report.riskLevel)}</span></p>
                                    <p><strong>报告摘要:</strong></p>
                                    <p>${report.summary}</p>
                                </div>
                            `
                        });
                    });
                },

                // 查询数据
                searchData() {
                    this.loadData();
                },

                // 重置筛选条件
                resetFilter() {
                    this.filterParams = {
                        startDate: '',
                        endDate: '',
                        riskLevel: '',
                        keyword: ''
                    };
                    layui.use('form', () => {
                        layui.form.val('filterForm', this.filterParams);
                    });
                    this.loadData();
                }
            }
        });

        // 响应式处理
        window.addEventListener('resize', () => {
            const app = document.querySelector('#app').__vue__;
            if (app.trendChart) app.trendChart.resize();
            if (app.riskChart) app.riskChart.resize();
            if (app.sentimentChart) app.sentimentChart.resize();
            if (app.topicChart) app.topicChart.resize();
        });
    </script>
</body>
</html>